<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <title>商品列表</title>


    <style>
        #zly{
            width: 50px;
            height: 50px;

            /* 设置边框为圆形 */
            border-radius: 50%;
        }
        #font-color{
            color: white;
            background-color:rgb(34, 33, 33);

        }   
        #log-ss{
            top:0px;
            width: 0%;
        }
        #BS a:hover{
                color: red;
        }
    </style>

</head>
<body>
        <!-- 导航begin -->
        <%@ include file="../common/nav.jsp" %>
        <!-- 导航end -->        
<div class="container-fluid" style="padding-top: 0px;">
    <div class="row">
        <div>
            <img src="${path}/imgs/xiaomidaohang.jpg" alt="" style="width: 100%">
        </div>

        <div class="col-md-2" style="margin-top: 50px; padding-left: 50px;">
            <ul class="nav nav-tab vertical-tab" role="tablist" id="vtab">
                <li role="presentation" class="active">
                    <p>商品分类</p>
                </li>
                <li role="presentation">
                    <a href="#tab1" aria-controls="home" role="tab" style="color: black;"
                        data-toggle="tab">小米手机</a>
                </li>
                <li role="presentation">
                    <a href="#tab2" aria-controls="home" role="tab"style="color: black;"
                        data-toggle="tab">小米电脑</a>
                </li>

            </ul>
        </div>
        <div class="tab-content vertical-tab-content col-xs-10">
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style=" height: 40px; padding-top: 1px; padding-bottom: 1px; padding-left: 1px;  padding-right: 1px; width: 132px;
                    margin-left: 40px; margin-top: 40px; background-color: white;">人气
                    <span class="caret" style="margin-left: 10px;"></span>
                </button>
                <ul class="dropdown-menu" role="menu" style="margin-left: 20px;"> 
                    <li>
                        <a href="#">人气</a>
                    </li>
                    <li>
                        <a href="#">销量</a>
                    </li>
                    <li>
                        <a href="#">新品</a>
                    </li>
                    <li>
                        <a href="#">价格升序</a>
                    </li>
                    <li>
                        <a href="#">价格降序</a>
                    </li>
                </ul>
                <label style="margin-left: 20px; margin-top: 45px; font-weight: lighter;">
                    <input type="checkbox" style="height: 16px;width: 16px;">仅显示有货
                </label>
            </div>
            
            <div role="tabpanel" class="tab-pane active" id="tab1">
                <div class="row" style="margin-top: 20px;">
                    <c:forEach items="${phones}" var="b">
                        <div class="col-sm-4 col-md-4">
                            <div class="thumbnail" style="border: 0px;">
                                <a href="${path}/Detailed"><img src="${path}/imgs/${b.imgUrl}"
                                                                alt="通用的占位符缩略图"></a>
                                <div class="caption" >
                                    <p style="font-size: 20px; color:red;text-align: center;">￥${b.price}.00</p><br>
                                    <p style="font-size: 20px; text-align:center;">${b.phoneName}</p>




                                    <c:if test="${userLogin.power == 0}">
                                        <p class="text-warning pull-right">
                                                <%--超链接 - get请求--%>
                                                <%--发送数据 - 传统直接在url后面拼接参数--%>
                                            <a class="text-warning" href="${path}/edit?id=${b.id}">
                                                <span class="glyphicon glyphicon-edit"></span>
                                            </a>
                                        </p>
                                        <p class="text-danger">
                                            <a class="text-danger" href="${path}/del?id=${b.id}">
                                                <span class="glyphicon glyphicon-trash"></span>
                                            </a>
                                        </p>
                                    </c:if>
                                </div>
                            </div>
                        </div>
                    </c:forEach>

                </div>
                <ul class="pagination" style="margin-left: 800px;margin-bottom: 0px; margin-top: 20px;">
                    <li><a href="#">&laquo;</a></li>
                    <li><a href="#">1</a></li>
                    <li ><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </div>
            <div role="tabpanel" class="tab-pane" id="tab2">
                <div class="row" style="margin-top: 40px;">
                    <div class="col-md-4" id="img">
                            <div class="thumbnail" style="border: 0px;">
                            <a href="#"><img src="${path}/imgs/MIAir 2019.jpg"
                                alt="通用的占位符缩略图" id="img"> </a>
                            <div class="caption" >
                                <h3 style="font-size: 20px; text-align: center;">MIAir 2019</h3>
                                <h3 style="font-size: 25px; text-align: center;padding-top: 0px;margin-bottom: 20px;margin-top: 0px;">￥ 3299.00</h3>
                            </div>
                            </div>
                    </div>
                    <div class=" col-md-4">
                        <div class="thumbnail" style="border: 0px;">
                            <a href="#"><img src="${path}/imgs/RedmiBook.jpg"
                            alt="通用的占位符缩略图" id="img"></a>
                            <div class="caption">
                                <h3 style="font-size: 20px; text-align: center;">RedmiBook</h3>
                                <h3 style="font-size: 25px; text-align: center;padding-top: 0px;margin-bottom: 20px;margin-top: 0px;">￥ 5199.00</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail" style="border: 0px;">
                            <a href="#"><img src="${path}/imgs/MIPro 2019.jpg" id="img"
                            alt="通用的占位符缩略图"></a>
                            <div class="caption">
                                <h3 style="font-size: 20px; text-align: center;">MIPro 2019</h3>
                                <h3 style="font-size: 25px; text-align: center;padding-top: 0px;margin-bottom: 20px;margin-top: 0px;">￥ 6989.00</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail" style="border: 0px;">
                            <a href="#"><img src="${path}/imgs/MIRuby.jpg" id="img"
                            alt="通用的占位符缩略图"></a>
                            <div class="caption">
                                <h3 style="font-size: 20px; text-align: center;">MIRuby</h3>
                                <h3 style="font-size: 25px; text-align: center;padding-top: 0px;margin-bottom: 20px;margin-top: 0px;">￥ 3899.00</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="img">
                        <div class="thumbnail" style="border: 0px;">
                            <a href="#"><img src="${path}/imgs/RedmiBook 14 rui.jpg" id="img"
                            alt="通用的占位符缩略图"></a>
                            <div class="caption" >
                                <h3 style="font-size: 20px; text-align: center;">RedmiBook 14 rui</h3>
                                <h3 style="font-size: 25px; text-align: center;padding-top: 0px;margin-bottom: 20px;margin-top: 0px;">￥ 3999.00</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4" id="img">
                        <div class="thumbnail" style="border: 0px;">
                            <a href="#"><img src="${path}/imgs/RedmiBook 14 plas.jpg" id="img"
                            alt="通用的占位符缩略图"></a>
                            <div class="caption" >
                                <h3 style="font-size: 20px; text-align: center;">RedmiBook 14 plas</h3>
                                <h3 style="font-size: 25px; text-align: center;padding-top: 0px;margin-bottom: 20px;margin-top: 0px;">￥ 4799.00</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



        <script src="${path}/plugins/jquery/jquery.min.js"></script>
        <script src="${path}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
        <script>
            $('#myCarousel').carousel({
                interval: 2000
            })
        </script>
        <%@ include file="../common/footer.jsp" %>


</body>
</html>